<template>
	<gui-page :customHeader="false" :fullPage="true">
		<template v-slot:gBody>
			<view class="gui-padding">
				<view class="gui-flex gui-space-between gui-wrap">
					<view
						v-for="item of dataRec.listArr"
						:key="item.id"
						@click="toDetail(item.path)"
						class="gui-flex gui-column gui-justify-content-center gui-align-items-center gui-bg-white gui-border-radius"
						style="width: 325rpx; height: 280rpx; margin-bottom: 40rpx"
					>
						<image :src="item.iconUrl" mode="aspectFill" style="width: 120rpx; height: 120rpx"></image>
						<view class="gui-text gui-margin-top">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<gui-popup ref="guipopup" :zIndex="1000" :canCloseByShade="false">
				<view class="gui-relative gui-box-shadow gui-bg-white gui-padding gui-border-radius">
					<view class="gui-text gui-text-center gui-blod gui-h4" style="margin-bottom: 20rpx">导出</view>
					<view class="formWrap">
						<view class="gui-h4" style="margin: 20rpx 0">格式</view>
						<view class="">
							<radio-group @change="(e) => radioChange(e, 1)">
								<view class="gui-flex gui-justify-content-start">
									<label class="gui-flex gui-align-items-center" style="width: 190rpx">
										<view>
											<radio style="transform: scale(0.7)" color="#07c160" value="1" :checked="'1' == dataRec.formData.name1" />
										</view>
										<view class="gui-form-label gui-secondary-text">数据库</view>
									</label>
									<label class="gui-flex gui-align-items-center">
										<view>
											<radio style="transform: scale(0.7)" color="#07c160" value="2" :checked="'2' == dataRec.formData.name1" />
										</view>
										<view class="gui-form-label gui-secondary-text">表格</view>
									</label>
								</view>
							</radio-group>
						</view>
						<view class="gui-h4" style="margin: 20rpx 0">地块列</view>
						<view class="">
							<radio-group @change="(e) => radioChange(e, 2)">
								<view class="gui-flex gui-justify-content-start">
									<label class="gui-flex gui-align-items-center">
										<view>
											<radio style="transform: scale(0.7)" color="#07c160" value="1" :checked="'1' == dataRec.formData.is_shiyan" />
										</view>
										<view class="gui-text gui-secondary-text">自己默认的实验</view>
									</label>
									<label class="gui-flex gui-align-items-center">
										<view>
											<radio style="transform: scale(0.7)" color="#07c160" value="2" :checked="'2' == dataRec.formData.is_shiyan" />
										</view>
										<view class="gui-text gui-secondary-text">所有自己的实验</view>
									</label>
								</view>
							</radio-group>
						</view>
						<view class="gui-h4" style="margin: 20rpx 0">性状</view>
						<view class="">
							<radio-group @change="(e) => radioChange(e, 3)">
								<view class="gui-flex gui-justify-content-start">
									<label class="gui-flex gui-align-items-center">
										<view>
											<radio style="transform: scale(0.7)" color="#07c160" value="1" :checked="'1' == dataRec.formData.is_shuju" />
										</view>
										<view class="gui-text gui-secondary-text">自己勾选的后台数据</view>
									</label>
									<label class="gui-flex gui-align-items-center">
										<view>
											<radio style="transform: scale(0.7)" color="#07c160" value="2" :checked="'2' == dataRec.formData.is_shuju" />
										</view>
										<view class="gui-text gui-secondary-text">后台添加的所有数据</view>
									</label>
								</view>
							</radio-group>
						</view>
						<view class="gui-h4" style="margin: 20rpx 0">文件名</view>
						<view class="gui-form-item" :class="['gui-border-b']">
							<view class="gui-form-body">
								<input type="text" class="gui-form-input" v-model="dataRec.formData.title" placeholder="请输入文件名" />
							</view>
						</view>
					</view>
					<view class="gui-margin-top gui-flex gui-space-between">
						<button type="default" class="gui-button-mini gui-bg-grey7 gui-noborder" style="width: 200rpx" @click="cancelPopup">
							<text class="gui-button-text-mini gui-color-grey">取消</text>
						</button>
						<button type="default" class="gui-button-mini gui-bg-primary gui-noborder" @click="saveHandle" style="width: 200rpx">
							<text class="gui-color-white gui-button-text-mini">保存</text>
						</button>
					</view>
				</view>
			</gui-popup>
		</template>
	</gui-page>
</template>
<script setup>
import { Local } from '@utils/storage.js';
import graceJS from '@/Grace6/js/grace.js';
import { exportApi } from '@api/api.js';
import { reactive, ref, toRefs, onMounted, onActivated } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import imgArr from '@assets/js/export.js';
let guipopup = ref();
let imgArrRec = reactive(imgArr);
let dataRec = reactive({
	formData: {
		name1: '',
		is_shiyan: '',
		is_shuju: '',
		title: ''
	},
	listArr: [
		{
			id: 1,
			iconUrl: imgArrRec.icon_testplot,
			name: '实验地块',
			path: '/pages/experPlot/experPlot'
		},
		{
			id: 2,
			iconUrl: imgArrRec.icon_plotdata,
			name: '地块数据',
			path: '/pages/plotData/plotData'
		},
		{
			id: 3,
			iconUrl: imgArrRec.icon_testdetail,
			name: '实验详情',
			path: '/pages/experDetails/experDetails'
		},
		{
			id: 4,
			iconUrl: imgArrRec.icon_exportdata,
			name: '导出',
			path: 'export'
		},
		{
			id: 5,
			iconUrl: imgArrRec.icon_setting,
			name: '设置',
			path: '/pages/setting/setting'
		},
		{
			id: 6,
			iconUrl: imgArrRec.icon_about,
			name: '关于',
			path: '/pages/about/about?code=3'
		}
	]
});
let toDetail = (url) => {
	switch (url) {
		case 'export':
			guipopup.value.open();
			break;
		case '/pages/plotData/plotData':
		case '/pages/experDetails/experDetails':
			if (!Local.get('selectplotId')) {
				uni.showToast({
					title: '请先选择地块',
					icon: 'none'
				});
				break;
			}
		default:
			uni.navigateTo({
				url
			});
			break;
	}
};
let radioChange = (e, type) => {
	switch (type) {
		case 1:
			dataRec.formData.name1 = e.detail.value;
			break;
		case 2:
			dataRec.formData.is_shiyan = e.detail.value;
			break;
		case 3:
			dataRec.formData.is_shuju = e.detail.value;
			break;
		default:
			break;
	}
};
let saveHandle = async () => {
	try {
		let res = await exportApi(dataRec.formData);
	} catch (res) {
		const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
		const url = URL.createObjectURL(blob);
		const a = document.createElement('a');
		a.href = url;
		a.download = `${dataRec.formData.title}.xls`; // 替换为你想要保存的文件名
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
		URL.revokeObjectURL(url);
		cancelPopup();
	}
};

let cancelPopup = () => {
	guipopup.value.close();
	resetForm();
};
let resetForm = () => {
	dataRec.formData = {
		name1: '',
		is_shiyan: '',
		is_shuju: '',
		title: ''
	};
};
onShow(() => {});
onMounted(async () => {});
</script>
<style lang="scss" scoped>
page {
	background-color: #fafafa;
}
</style>
